﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools Documentation - Element/Element</title>
</head>

<body>
  <div id="docs" class="doc">
    <div class="methods">
			<h4 class="menu-item"><a href="#Window">Window</a></h4>
			<div class="menu-item"><a href="#Window:document-id">document.id</a></div>
			<div class="menu-item"><a href="#Window:dollar">dollar</a></div>
			<div class="menu-item"><a href="#Window:dollars">dollars</a></div>
			<h4 class="menu-item"><a href="#Element">Element</a></h4>
			<div class="menu-item"><a href="#Element:constructor">constructor</a></div>
			<div class="menu-item"><a href="#Element:getElement">getElement</a></div>
			<div class="menu-item"><a href="#Element:getElements">getElements</a></div>
			<div class="menu-item"><a href="#Element:getElementById">getElementById</a></div>
			<div class="menu-item"><a href="#Element:set">set</a></div>
			<div class="menu-item"><a href="#Element:get">get</a></div>
			<div class="menu-item"><a href="#Element:erase">erase</a></div>
			<div class="menu-item"><a href="#Element:match">match</a></div>
			<div class="menu-item"><a href="#Element:contains">contains</a></div>
			<div class="menu-item"><a href="#Element:inject">inject</a></div>
			<div class="menu-item"><a href="#Element:grab">grab</a></div>
			<div class="menu-item"><a href="#Element:adopt">adopt</a></div>
			<div class="menu-item"><a href="#Element:wraps">wraps</a></div>
			<div class="menu-item"><a href="#Element:appendText">appendText</a></div>
			<div class="menu-item"><a href="#Element:dispose">dispose</a></div>
			<div class="menu-item"><a href="#Element:clone">clone</a></div>
			<div class="menu-item"><a href="#Element:replaces">replaces</a></div>
			<div class="menu-item"><a href="#Element:hasClass">hasClass</a></div>
			<div class="menu-item"><a href="#Element:addClass">addClass</a></div>
			<div class="menu-item"><a href="#Element:removeClass">removeClass</a></div>
			<div class="menu-item"><a href="#Element:toggleClass">toggleClass</a></div>
			<div class="menu-item"><a href="#Element:getPrevious">getPrevious</a></div>
			<div class="menu-item"><a href="#Element:getAllPrevious">getAllPrevious</a></div>
			<div class="menu-item"><a href="#Element:getNext">getNext</a></div>
			<div class="menu-item"><a href="#Element:getAllNext">getAllNext</a></div>
			<div class="menu-item"><a href="#Element:getFirst">getFirst</a></div>
			<div class="menu-item"><a href="#Element:getLast">getLast</a></div>
			<div class="menu-item"><a href="#Element:getParent">getParent</a></div>
			<div class="menu-item"><a href="#Element:getParents">getParents</a></div>
			<div class="menu-item"><a href="#Element:getSiblings">getSiblings</a></div>
			<div class="menu-item"><a href="#Element:getChildren">getChildren</a></div>
			<div class="menu-item"><a href="#Element:empty">empty</a></div>
			<div class="menu-item"><a href="#Element:destroy">destroy</a></div>
			<div class="menu-item"><a href="#Element:toQueryString">toQueryString</a></div>
			<div class="menu-item"><a href="#Element:getSelected">getSelected</a></div>
			<div class="menu-item"><a href="#Element:getProperty">getProperty</a></div>
			<div class="menu-item"><a href="#Element:getProperties">getProperties</a></div>
			<div class="menu-item"><a href="#Element:setProperty">setProperty</a></div>
			<div class="menu-item"><a href="#Element:setProperties">setProperties</a></div>
			<div class="menu-item"><a href="#Element:removeProperty">removeProperty</a></div>
			<div class="menu-item"><a href="#Element:removeProperties">removeProperties</a></div>
			<div class="menu-item"><a href="#Element:store">store</a></div>
			<div class="menu-item"><a href="#Element:retrieve">retrieve</a></div>
			<div class="menu-item"><a href="#Element:eliminate">eliminate</a></div>
			<h4 class="menu-item"><a href="#Element-Properties">Element.Properties</a></h4>
			<div class="menu-item"><a href="#Element-Properties:html">html</a></div>
			<div class="menu-item"><a href="#Element-Properties:text">text</a></div>
			<div class="menu-item"><a href="#Element-Properties:tag">tag</a></div>
			<h4 class="menu-item"><a href="#IFrame">IFrame</a></h4>
			<div class="menu-item"><a href="#IFrame:constructor">constructor</a></div>
			<h4 class="menu-item"><a href="#Elements">Elements</a></h4>
			<div class="menu-item"><a href="#Elements:constructor">constructor</a></div>
			<div class="menu-item"><a href="#Elements:filter">filter</a></div>
			<h4 class="menu-item"><a href="#Deprecated-Functions">Deprecated.Functions</a></h4>
			<div class="menu-item"><a href="#Deprecated-Functions:hasChild">hasChild</a></div>
    </div>
    <div class="l-border r-border span-15 content">
				<h1 id="Window"><a href="#Window">Type: Window</a></h1>

<p class="description">The following functions are treated as Window methods.</p>

<h2 id="Window:document-id"><a href="#Window:document-id">Function: document.id</a></h2>

<p class="description">The document.id function has a dual purpose: Getting the element by its id, and making an element in Internet Explorer "grab" all the <a href="#Element">Element</a> methods.</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> myElement = document.<span class="me1">id</span><span class="br0">(</span>el<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>el - The Element to be extended. Can be one of the following types:

<ul>
<li>(<em>element</em>) The element will be extended if it is not already.</li>
<li>(<em>string</em>) A string containing the id of the DOM element desired.</li>
<li>(<em>object</em>) If the object has a toElement method, toElement will be called to get the Element.</li>
</ul>
</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>element</em>) A DOM element.</li>
<li>(<em>null</em>) Null if no matching id was found or if toElement did not return an element.</li>
</ul>
<h3>Examples:</h3>

<h4>Get a DOM Element by ID:</h4>

<pre class="javascript"><span class="kw2">var</span> myElement = document.<span class="me1">id</span><span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>;
</pre>

<h4>Get a DOM Element by reference:</h4>

<pre class="javascript"><span class="kw2">var</span> div = document.<span class="me1">getElementById</span><span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>;
div = document.<span class="me1">id</span><span class="br0">(</span>div<span class="br0">)</span>; <span class="co1">// the element with all the Element methods applied.</span>
</pre>

<h3>Notes:</h3>

<ul>
<li>This method is useful when it's unclear if working with an actual element or an id.  It also serves as a shorthand for document.getElementById().</li>
<li>In Internet Explorer, the <a href="#Element">Element</a> is extended the first time document.id is called on it, and all the <a href="#Element">Element</a> Methods become available.</li>
<li>Browsers with native HTMLElement support, such as Safari, Firefox, and Opera, apply all the <a href="#Element">Element</a> Methods to every DOM element automatically.</li>
<li>Because MooTools detects if an element needs to be extended or not, this function may be called on the same Element many times with no ill effects.</li>
</ul>
<h2 id="Window:dollar"><a href="#Window:dollar">Function: $</a></h2>

<p class="description">The dollar function is an alias for <a href="#Window:document-id">document:id</a> if the $ variable is not set already.
However it is not recommended to use more frameworks, the $ variable can be set by another framework or script. MooTools will detect this and determine if it will set the $ function so it will not be overwritten.</p>

<h3>Examples:</h3>

<pre class="javascript"><span class="kw2">var</span> myElement = $<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>;
<span class="kw2">var</span> myElement2 = document.<span class="me1">id</span><span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>;
&nbsp;
myElement == myElement2; <span class="co1">// returns true</span>
&nbsp;
&nbsp;
<span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span>$<span class="br0">)</span><span class="br0">{</span>
&nbsp;
    <span class="co1">// Now you can use $ safely in this closure</span>
&nbsp;
<span class="br0">}</span><span class="br0">)</span><span class="br0">(</span>document.<span class="me1">id</span><span class="br0">)</span>
</pre>

<h3>See Also:</h3>

<ul>
<li>MooTools Blogpost: <a href="http://mootools.net/blog/2009/06/22/the-dollar-safe-mode/">The Dollar Save Mode</a>
</li>
</ul>
<h2 id="Window:dollars"><a href="#Window:dollars">Function: $$</a></h2>

<p class="description">Selects and extends DOM elements. Return an Elements instance.
The Element instance returned is an array-like object, supporting every <a href="../Types/Array.html">Array</a> method and every <a href="#Element">Element</a> method.</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> myElements = $$<span class="br0">(</span>argument<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ul>
<li>selector - (<em>string</em>) A CSS selector</li>
<li>elements - (<em>elements</em>), (<em>collection</em>) or (<em>array</em>) An enumerable list of elements</li>
<li>element, element - (<em>element</em>) any number of elements as arguments</li>
</ul>
<h3>Returns:</h3>

<ul>
<li>(<em>elements</em>) - An array-like Elements collection of all the DOM elements matched, extended with <a href="#Window:document-id">document:id</a>.</li>
</ul>
<h3>Examples:</h3>

<h4>Get Elements by Their Tag Names:</h4>

<pre class="javascript">$$<span class="br0">(</span><span class="st0">'a'</span><span class="br0">)</span>; <span class="co1">// returns all anchor elements in the page.</span>
</pre>

<h4>Get an Elements instance by passing multiple elements:</h4>

<pre class="javascript">$$<span class="br0">(</span>element1, element2, element3<span class="br0">)</span>; <span class="co1">// returns an Elements instance containing these 3 elements.</span>
</pre>

<h4>Convert any array or collection of elements to an Elements instance:</h4>

<pre class="javascript">$$<span class="br0">(</span><span class="br0">[</span>element1, element2, element3<span class="br0">]</span><span class="br0">)</span>; <span class="co1">// returns an Elements instance containing these 3 elements.</span>
$$<span class="br0">(</span>document.<span class="me1">getElementsByTagName</span><span class="br0">(</span><span class="st0">'a'</span><span class="br0">)</span><span class="br0">)</span>; <span class="co1">// returns an Elements instance containing the result of the getElementsByTagName call.</span>
</pre>

<h4>Using CSS Selectors:</h4>

<pre class="javascript">$$<span class="br0">(</span><span class="st0">'#myElement'</span><span class="br0">)</span>; <span class="co1">// returns an Elements instance containing only the element with the id 'myElement'.</span>
$$<span class="br0">(</span><span class="st0">'#myElement a.myClass'</span><span class="br0">)</span>; <span class="co1">// returns an Elements instance of all anchor tags with the class 'myClass' within the DOM element with id 'myElement'.</span>
$$<span class="br0">(</span><span class="st0">'a, b'</span><span class="br0">)</span>; <span class="co1">// returns an array of all anchor and bold elements in the page.</span>
</pre>

<h3>Notes:</h3>

<ul>
<li>Since MooTools 1.3 this function does not accept multiple collections or multiple strings as arguments.</li>
<li>If an expression doesn't find any elements, an empty Elements instance will be returned.</li>
<li>The return type of element methods run through <a href="#Window:dollars">$$</a> is always an Elements instance, regardless of the amount of results.</li>
<li>Default Selectors supported are the same as you can find on <a href="http://www.w3.org/TR/css3-selectors/#selectors">W3C CSS3 selectors</a>.</li>
</ul>
<h1 id="Element"><a href="#Element">Type: Element</a></h1>

<p class="description">Custom Type to allow all of its methods to be used with any extended DOM Element.</p>

<h2 id="Element:constructor"><a href="#Element:constructor">Element Method: constructor</a></h2>

<p class="description">Creates a new Element of the type passed in.</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> myEl = <span class="kw2">new</span> Element<span class="br0">(</span>element<span class="br0">[</span>, properties<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>element - (<em>mixed</em>) The tag name for the Element to be created or an actual DOM element or a CSS selector.</li>
<li>properties - (<em>object</em>, optional) Calls the Single Argument version of <a href="#Element:set">Element:set</a> with the properties object passed in.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>element</em>) A new MooTools extended HTML Element.</li>
</ul>
<h3>Examples:</h3>

<pre class="javascript"><span class="co1">// Creating an new anchor with an Object</span>
<span class="kw2">var</span> myAnchor = <span class="kw2">new</span> Element<span class="br0">(</span><span class="st0">'a'</span>, <span class="br0">{</span>
    href: <span class="st0">'http://mootools.net'</span>,
    <span class="st0">'class'</span>: <span class="st0">'myClass'</span>,
    html: <span class="st0">'Click me!'</span>,
    styles: <span class="br0">{</span>
        display: <span class="st0">'block'</span>,
        border: <span class="st0">'1px solid black'</span>
    <span class="br0">}</span>,
    events: <span class="br0">{</span>
        click: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
            <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'clicked'</span><span class="br0">)</span>;
        <span class="br0">}</span>,
        mouseover: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
            <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'mouseovered'</span><span class="br0">)</span>;
        <span class="br0">}</span>
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
<span class="co1">// Using Selectors</span>
<span class="kw2">var</span> myNewElement = <span class="kw2">new</span> Element<span class="br0">(</span><span class="st0">'a.myClass'</span><span class="br0">)</span>;
</pre>

<h3>Note:</h3>

<p>Because the element name is parsed as a CSS selector, colons in namespaced tags have to be escaped. So <code>new Element('fb\:name)</code> becomes <code>&lt;fb:name&gt;</code>.</p>

<h3>See Also:</h3>

<ul>
<li>
<a href="#Window:dollar">$</a>, <a href="#Element:set">Element:set</a>
</li>
</ul>
<h2 id="Element:getElement"><a href="#Element:getElement">Element Method: getElement</a></h2>

<p class="description">Gets the first descendant element whose tag name matches the tag provided. CSS selectors may also be passed.</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> myElement = myElement.<span class="me1">getElement</span><span class="br0">(</span>tag<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>tag - (<em>string</em>) Tag name of the element to find or a CSS Selector.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>mixed</em>) If a match is found, the Element will be returned. Otherwise, returns null.</li>
</ul>
<h3>Examples:</h3>

<pre class="javascript"><span class="kw2">var</span> firstDiv = $<span class="br0">(</span>document.<span class="me1">body</span><span class="br0">)</span>.<span class="me1">getElement</span><span class="br0">(</span><span class="st0">'div'</span><span class="br0">)</span>;
</pre>

<h3>Notes:</h3>

<ul>
<li>This method is also available for Document instances.</li>
<li>Default Selectors supported are the same as you can find on <a href="http://www.w3.org/TR/css3-selectors/#selectors">W3C CSS3 selectors</a>.</li>
</ul>
<h2 id="Element:getElements"><a href="#Element:getElements">Element Method: getElements</a></h2>

<p class="description">Collects all decedent elements whose tag name matches the tag provided. CSS selectors may also be passed.</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> myElements = myElement.<span class="me1">getElements</span><span class="br0">(</span>tag<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>tag - (<em>string</em>) String of the tag to match  or a CSS Selector.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>array</em>) An <a href="#Elements">Elements</a> array of all matched Elements.</li>
</ul>
<h3>Examples:</h3>

<pre class="javascript"><span class="kw2">var</span> allAnchors = $<span class="br0">(</span>document.<span class="me1">body</span><span class="br0">)</span>.<span class="me1">getElements</span><span class="br0">(</span><span class="st0">'a'</span><span class="br0">)</span>;
</pre>

<h3>Notes:</h3>

<ul>
<li>This method is also available for Document instances.</li>
<li>Default Selectors supported are the same as you can find on <a href="http://www.w3.org/TR/css3-selectors/#selectors">W3C CSS3 selectors</a>.</li>
</ul>
<h2 id="Element:getElementById"><a href="#Element:getElementById">Element Method: getElementById</a></h2>

<p class="description">Gets the element with the specified id found inside the current Element.</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> myElement = anElement.<span class="me1">getElementById</span><span class="br0">(</span>id<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>id - (<em>string</em>) The ID of the Element to find.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>mixed</em>) If a match is found, returns that Element. Otherwise, returns null.</li>
</ul>
<h3>Examples:</h3>

<pre class="javascript"><span class="kw2">var</span> myChild = $<span class="br0">(</span><span class="st0">'myParent'</span><span class="br0">)</span>.<span class="me1">getElementById</span><span class="br0">(</span><span class="st0">'myChild'</span><span class="br0">)</span>;
</pre>

<h3>Notes:</h3>

<ul>
<li>This method is not provided for Document instances as document.getElementById is provided natively.</li>
</ul>
<h2 id="Element:set"><a href="#Element:set">Element Method: set</a></h2>

<p class="description">This is a "dynamic arguments" method. Properties passed in can be any of the 'set' properties in the <a href="#Element-Properties">Element.Properties</a> Object.</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">set</span><span class="br0">(</span>arguments<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ul>
<li>Two Arguments (property, value)

<ol>
<li>property - (<em>string</em>) The string key from the <a href="#Element-Properties">Element.Properties</a> Object representing the property to set.</li>
<li>value - (<em>mixed</em>) The value to set for the specified property.</li>
</ol>
</li>
<li>One Argument (properties)

<ol>
<li>properties - (<em>object</em>) Object with its keys/value pairs representing the properties and values to set for the Element (as described below).</li>
</ol>
</li>
</ul>
<h3>Returns:</h3>

<ul>
<li>(<em>element</em>) This Element.</li>
</ul>
<h3>Examples:</h3>

<h4>With Property and Value:</h4>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'text'</span>, <span class="st0">'text goes here'</span><span class="br0">)</span>;
$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'class'</span>, <span class="st0">'active'</span><span class="br0">)</span>;
<span class="co1">// the 'styles' property passes the object to Element:setStyles.</span>
<span class="kw2">var</span> body = $<span class="br0">(</span>document.<span class="me1">body</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'styles'</span>, <span class="br0">{</span>
    font: <span class="st0">'12px Arial'</span>,
    color: <span class="st0">'blue'</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h4>With an Object:</h4>

<pre class="javascript"><span class="kw2">var</span> myElement = $<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="br0">{</span>
    <span class="co1">// the 'styles' property passes the object to Element:setStyles.</span>
    styles: <span class="br0">{</span>
        font: <span class="st0">'12px Arial'</span>,
        color: <span class="st0">'blue'</span>,
        border: <span class="st0">'1px solid #f00'</span>
    <span class="br0">}</span>,
    <span class="co1">// the 'events' property passes the object to Element:addEvents.</span>
    events: <span class="br0">{</span>
        click: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'click'</span><span class="br0">)</span>; <span class="br0">}</span>,
        mouseover: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> <span class="kw1">this</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'over'</span><span class="br0">)</span>; <span class="br0">}</span>
    <span class="br0">}</span>,
    <span class="co1">//Any other property uses Element:setProperty.</span>
    id: <span class="st0">'documentBody'</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h3>Notes:</h3>

<ul>
<li>All the property arguments are passed to the corresponding method of the <a href="#Element-Properties">Element.Properties</a> Object.</li>
<li>If no matching property is found in <a href="#Element-Properties">Element.Properties</a>, it falls back to <a href="#Element:setProperty">Element:setProperty</a>.</li>
<li>Whenever using <a href="#Element:setProperty">Element:setProperty</a> to set an attribute, pass in the lowercase, simplified form of the property. For example:

<ul>
<li>use 'for', not 'htmlFor',</li>
<li>use 'class', not 'className'</li>
<li>use 'frameborder', not 'frameBorder'</li>
<li>etc.</li>
</ul>
</li>
</ul>
<h3>See Also:</h3>

<ul>
<li>
<a href="#Element">Element</a>, <a href="#Element-Properties">Element.Properties</a>, <a href="#Element:setProperty">Element:setProperty</a>, <a href="Element.Event.html#Element:addEvents">Element:addEvents</a>, <a href="Element.Style.html#Element:setStyles">Element:setStyles</a>
</li>
</ul>
<h2 id="Element:get"><a href="#Element:get">Element Method: get</a></h2>

<p class="description">This is a "dynamic arguments" method. Properties passed in can be any of the 'get' properties in the <a href="#Element-Properties">Element.Properties</a> Object.</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">get</span><span class="br0">(</span>property<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>property - (<em>string</em>) The string key from the <a href="#Element-Properties">Element.Properties</a> Object representing the property to get.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>mixed</em>) The result of calling the corresponding 'get' function in the <a href="#Element-Properties">Element.Properties</a> Object.</li>
</ul>
<h3>Examples:</h3>

<h4>Using Custom Getters:</h4>

<pre class="javascript"><span class="kw2">var</span> tag = $<span class="br0">(</span><span class="st0">'myDiv'</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'tag'</span><span class="br0">)</span>; <span class="co1">// returns "div".</span>
</pre>

<h4>Fallback to Element Attributes:</h4>

<pre class="javascript"><span class="kw2">var</span> id = $<span class="br0">(</span><span class="st0">'myDiv'</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'id'</span><span class="br0">)</span>; <span class="co1">// returns "myDiv".</span>
<span class="kw2">var</span> value = $<span class="br0">(</span><span class="st0">'myInput'</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'value'</span><span class="br0">)</span>; <span class="co1">// returns the myInput element's value.</span>
</pre>

<h3>Notes:</h3>

<ul>
<li>If the corresponding accessor doesn't exist in the <a href="#Element-Properties">Element.Properties</a> Object, the result of <a href="#Element:getProperty">Element:getProperty</a> on the property passed in is returned.</li>
</ul>
<h3>See Also:</h3>

<ul>
<li>
<a href="#Element">Element</a>, <a href="#Element-Properties">Element.Properties</a>, <a href="#Element:getProperty">Element:getProperty</a>
</li>
</ul>
<h2 id="Element:erase"><a href="#Element:erase">Element Method: erase</a></h2>

<p class="description">This is a "dynamic arguments" method. Properties passed in can be any of the 'erase' properties in the <a href="#Element-Properties">Element.Properties</a> Object.</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">erase</span><span class="br0">(</span>property<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>property - (<em>string</em>) The string key from the <a href="#Element-Properties">Element.Properties</a> Object representing the property to erase.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>mixed</em>) The result of calling the corresponding 'erase' function in the <a href="#Element-Properties">Element.Properties</a> Object.</li>
</ul>
<h3>Examples:</h3>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myDiv'</span><span class="br0">)</span>.<span class="me1">erase</span><span class="br0">(</span><span class="st0">'id'</span><span class="br0">)</span>; <span class="co1">//Removes the id from myDiv.</span>
$<span class="br0">(</span><span class="st0">'myDiv'</span><span class="br0">)</span>.<span class="me1">erase</span><span class="br0">(</span><span class="st0">'class'</span><span class="br0">)</span>; <span class="co1">//myDiv element no longer has any class names set.</span>
</pre>

<h3>Note:</h3>

<ul>
<li>If the corresponding eraser doesn't exist in the  <a href="#Element-Properties">Element.Properties</a> Object, <a href="#Element:removeProperty">Element:removeProperty</a> is called with the property passed in.</li>
</ul>
<h3>See Also:</h3>

<ul>
<li>
<a href="#Element">Element</a>, <a href="#Element-Properties">Element.Properties</a>, <a href="#Element:removeProperty">Element:removeProperty</a>
</li>
</ul>
<h2 id="Element:match"><a href="#Element:match">Element Method: match</a></h2>

<p class="description">Tests this Element to see if it matches the argument passed in.</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">match</span><span class="br0">(</span>match<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>match - can be a string or element

<ul>
<li>(<em>string</em>) The tag name to test against this element. Any single CSS selectors may also be passed.</li>
<li>(<em>element</em>) An element to match; returns true if this is the actual element passed in.</li>
</ul>
</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>boolean</em>) If the element matched, returns true. Otherwise, returns false.</li>
</ul>
<h3>Examples:</h3>

<h4>Using a Tag Name:</h4>

<pre class="javascript"><span class="co1">// returns true if #myDiv is a div.</span>
$<span class="br0">(</span><span class="st0">'myDiv'</span><span class="br0">)</span>.<span class="me1">match</span><span class="br0">(</span><span class="st0">'div'</span><span class="br0">)</span>;
</pre>

<h4>Using a CSS Selector:</h4>

<pre class="javascript"><span class="co1">// returns true if #myDiv has the class foo and is named "bar"</span>
$<span class="br0">(</span><span class="st0">'myDiv'</span><span class="br0">)</span>.<span class="me1">match</span><span class="br0">(</span><span class="st0">'.foo[name=bar]'</span><span class="br0">)</span>;
</pre>

<h4>Using an Element:</h4>

<pre class="javascript"><span class="kw2">var</span> el = $<span class="br0">(</span><span class="st0">'myDiv'</span><span class="br0">)</span>;
$<span class="br0">(</span><span class="st0">'myDiv'</span><span class="br0">)</span>.<span class="me1">match</span><span class="br0">(</span>el<span class="br0">)</span>; <span class="co1">// returns true</span>
$<span class="br0">(</span><span class="st0">'otherElement'</span><span class="br0">)</span>.<span class="me1">match</span><span class="br0">(</span>el<span class="br0">)</span>; <span class="co1">// returns false</span>
</pre>

<h2 id="Element:contains"><a href="#Element:contains">Element Method: contains</a></h2>

<p class="description">Checks all descendants of this Element for a match.</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> result = myElement.<span class="me1">contains</span><span class="br0">(</span>el<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>el - (<em>mixed</em>) Can be an Element reference or string id.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>boolean</em>) Returns true if the element contains passed in Element is a child, otherwise false.</li>
</ul>
<h3>Examples:</h3>

<h5>HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"Darth_Vader"</span>&gt;
    &lt;div id=<span class="st0">"Luke"</span>&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript"><span class="kw1">if</span> <span class="br0">(</span>$<span class="br0">(</span><span class="st0">'Darth_Vader'</span><span class="br0">)</span>.<span class="me1">contains</span><span class="br0">(</span><span class="st0">'Luke'</span><span class="br0">)</span><span class="br0">)</span> <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'Luke, I am your father.'</span><span class="br0">)</span>; <span class="co1">//tan tan tannn...</span>
</pre>

<h2 id="Element:inject"><a href="#Element:inject">Element Method: inject</a></h2>

<p class="description">Injects, or inserts, the Element at a particular place relative to the Element's children (specified by the second the argument).</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">inject</span><span class="br0">(</span>el<span class="br0">[</span>, where<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>el   - (<em>mixed</em>) el can be the id of an element or an element.</li>
<li>where - (<em>string</em>, optional: defaults to 'bottom') The place to inject this Element.  Can be 'top', 'bottom', 'after', or 'before'.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>element</em>) This Element.</li>
</ul>
<h3>Examples:</h3>

<h5>JavaScript</h5>

<pre class="javascript"><span class="kw2">var</span> myFirstElement  = <span class="kw2">new</span> Element<span class="br0">(</span><span class="st0">'div'</span>, <span class="br0">{</span>id: <span class="st0">'myFirstElement'</span><span class="br0">}</span><span class="br0">)</span>;
<span class="kw2">var</span> mySecondElement = <span class="kw2">new</span> Element<span class="br0">(</span><span class="st0">'div'</span>, <span class="br0">{</span>id: <span class="st0">'mySecondElement'</span><span class="br0">}</span><span class="br0">)</span>;
<span class="kw2">var</span> myThirdElement  = <span class="kw2">new</span> Element<span class="br0">(</span><span class="st0">'div'</span>, <span class="br0">{</span>id: <span class="st0">'myThirdElement'</span><span class="br0">}</span><span class="br0">)</span>;
</pre>

<h5>Resulting HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"myFirstElement"</span>&gt;&lt;/div&gt;
&lt;div id=<span class="st0">"mySecondElement"</span>&gt;&lt;/div&gt;
&lt;div id=<span class="st0">"myThirdElement"</span>&gt;&lt;/div&gt;
</pre>

<h4>Inject to the bottom:</h4>

<h5>JavaScript</h5>

<pre class="javascript">myFirstElement.<span class="me1">inject</span><span class="br0">(</span>mySecondElement<span class="br0">)</span>;
</pre>

<h5>Resulting HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"mySecondElement"</span>&gt;
    &lt;div id=<span class="st0">"myFirstElement"</span>&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>

<h4>Inject to the top:</h4>

<h5>JavaScript</h5>

<pre class="javascript">myThirdElement.<span class="me1">inject</span><span class="br0">(</span>mySecondElement, <span class="st0">'top'</span><span class="br0">)</span>;
</pre>

<h5>Resulting HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"mySecondElement"</span>&gt;
    &lt;div id=<span class="st0">"myThirdElement"</span>&gt;&lt;/div&gt;
    &lt;div id=<span class="st0">"myFirstElement"</span>&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>

<h4>Inject before:</h4>

<h5>JavaScript</h5>

<pre class="javascript">myFirstElement.<span class="me1">inject</span><span class="br0">(</span>mySecondElement, <span class="st0">'before'</span><span class="br0">)</span>;
</pre>

<h5>Resulting HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"myFirstElement"</span>&gt;&lt;/div&gt;
&lt;div id=<span class="st0">"mySecondElement"</span>&gt;&lt;/div&gt;
</pre>

<h4>Inject After:</h4>

<h5>JavaScript</h5>

<pre class="javascript">myFirstElement.<span class="me1">inject</span><span class="br0">(</span>mySecondElement, <span class="st0">'after'</span><span class="br0">)</span>;
</pre>

<h5>Resulting HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"mySecondElement"</span>&gt;&lt;/div&gt;
&lt;div id=<span class="st0">"myFirstElement"</span>&gt;&lt;/div&gt;
</pre>

<h3>See Also:</h3>

<p><a href="#Element:adopt">Element:adopt</a>, <a href="#Element:grab">Element:grab</a>, <a href="#Element:wraps">Element:wraps</a></p>

<h2 id="Element:grab"><a href="#Element:grab">Element Method: grab</a></h2>

<p class="description">Works as <a href="#Element:inject">Element:inject</a>, but in reverse.</p>

<p>Appends the Element at a particular place relative to the Element's children (specified by the where parameter).</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">grab</span><span class="br0">(</span>el<span class="br0">[</span>, where<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>el - (<em>mixed</em>) el can be the id of an element or an Element.</li>
<li>where - (<em>string</em>, optional: default 'bottom') The place to append this Element. Can be 'top', 'bottom', 'before' or 'after'.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>element</em>) This Element.</li>
</ul>
<h3>Examples:</h3>

<h5>HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"first"</span>&gt;
    &lt;div id=<span class="st0">"child"</span>&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript"><span class="kw2">var</span> mySecondElement = <span class="kw2">new</span> Element<span class="br0">(</span><span class="st0">'div#second'</span><span class="br0">)</span>;
$<span class="br0">(</span><span class="st0">'first'</span><span class="br0">)</span>.<span class="me1">grab</span><span class="br0">(</span>mySecondElement<span class="br0">)</span>;
</pre>

<h5>Resulting HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"first"</span>&gt;
    &lt;div id=<span class="st0">"child"</span>&gt;&lt;/div&gt;
    &lt;div id=<span class="st0">"second"</span>&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript"><span class="kw2">var</span> mySecondElement = <span class="kw2">new</span> Element<span class="br0">(</span><span class="st0">'div#second'</span><span class="br0">)</span>;
myFirstElement.<span class="me1">grab</span><span class="br0">(</span>mySecondElement, <span class="st0">'top'</span><span class="br0">)</span>;
</pre>

<h5>Resulting HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"first"</span>&gt;
    &lt;div id=<span class="st0">"second"</span>&gt;&lt;/div&gt;
    &lt;div id=<span class="st0">"child"</span>&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>

<h3>See Also:</h3>

<p><a href="#Element:adopt">Element:adopt</a>, <a href="#Element:inject">Element:inject</a>, <a href="#Element:wraps">Element:wraps</a></p>

<h2 id="Element:adopt"><a href="#Element:adopt">Element Method: adopt</a></h2>

<p class="description">Works like <a href="#Element:grab">Element:grab</a>, but allows multiple elements to be adopted and only appended at the bottom.</p>

<p>Inserts the passed element(s) inside the Element (which will then become the parent element).</p>

<h3>Syntax:</h3>

<pre class="javascript">myParent.<span class="me1">adopt</span><span class="br0">(</span>el<span class="br0">[</span>, others<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>el - (<em>mixed</em>) The id of an element, an Element, or an array of elements.</li>
<li>others - (<em>mixed</em>, optional) One or more additional Elements separated by a comma or as an array.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>element</em>) This Element.</li>
</ul>
<h3>Examples:</h3>

<h5>JavaScript</h5>

<pre class="javascript"><span class="kw2">var</span> myFirstElement  = <span class="kw2">new</span> Element<span class="br0">(</span><span class="st0">'div#first'</span><span class="br0">)</span>;
<span class="kw2">var</span> mySecondElement = <span class="kw2">new</span> Element<span class="br0">(</span><span class="st0">'p#second'</span><span class="br0">)</span>;
<span class="kw2">var</span> myThirdElement  = <span class="kw2">new</span> Element<span class="br0">(</span><span class="st0">'ul#third'</span><span class="br0">)</span>;
<span class="kw2">var</span> myFourthElement = <span class="kw2">new</span> Element<span class="br0">(</span><span class="st0">'a#fourth'</span><span class="br0">)</span>;
&nbsp;
<span class="kw2">var</span> myParentElement = <span class="kw2">new</span> Element<span class="br0">(</span><span class="st0">'div#parent'</span><span class="br0">)</span>;
&nbsp;
myFirstElement.<span class="me1">adopt</span><span class="br0">(</span>mySecondElement<span class="br0">)</span>;
mySecondElement.<span class="me1">adopt</span><span class="br0">(</span><span class="st0">'third'</span>, myFourthElement<span class="br0">)</span>;
&nbsp;
myParent3.<span class="me1">adopt</span><span class="br0">(</span><span class="br0">[</span>myFirstElement, <span class="kw2">new</span> Element<span class="br0">(</span><span class="st0">'span#another'</span><span class="br0">)</span><span class="br0">]</span><span class="br0">)</span>;
</pre>

<h5>Resulting HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"parent"</span>&gt;
    &lt;p id=<span class="st0">"second"</span>&gt;
        &lt;ul id=<span class="st0">"third"</span>&gt;&lt;/ul&gt;
        &lt;a id=<span class="st0">"fourth"</span>&gt;&lt;/a&gt;
    &lt;/p&gt;
    &lt;span id=<span class="st0">"another"</span>&gt;&lt;/span&gt;
&lt;/div&gt;
</pre>

<h3>See Also:</h3>

<p><a href="#Element:grab">Element:grab</a>, <a href="#Element:inject">Element:inject</a>, <a href="#Element:wraps">Element:wraps</a></p>

<h2 id="Element:wraps"><a href="#Element:wraps">Element Method: wraps</a></h2>

<p class="description">Works like <a href="#Element:grab">Element:grab</a>, but replaces the element in its place, and then appends the replaced element in the location specified inside the this element.</p>

<h3>Syntax:</h3>

<pre class="javascript">myParent.<span class="me1">wraps</span><span class="br0">(</span>el<span class="br0">[</span>, where<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>el - (<em>mixed</em>) The id of an element or an Element.</li>
<li>where - (<em>string</em>, optional: default 'bottom') The place to insert the passed in element. Can be 'top' or 'bottom'.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>element</em>) This Element.</li>
</ul>
<h3>Examples:</h3>

<h5>HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"first"</span>&gt;&lt;/div&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript"><span class="kw2">var</span> mySecondElement = <span class="kw2">new</span> Element<span class="br0">(</span><span class="st0">'div#second'</span><span class="br0">)</span>.<span class="me1">wraps</span><span class="br0">(</span><span class="st0">'first'</span><span class="br0">)</span>;
</pre>

<h5>Resulting HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"second"</span>&gt;
    &lt;div id=<span class="st0">"first"</span>&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>

<h5>HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"first"</span>&gt;&lt;/div&gt;
&lt;div id=<span class="st0">"second"</span>&gt;
    &lt;div id=<span class="st0">"child"</span>&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'second'</span><span class="br0">)</span>.<span class="me1">wraps</span><span class="br0">(</span><span class="st0">'first'</span><span class="br0">)</span>;
</pre>

<h5>Resulting HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"second"</span>&gt;
    &lt;div id=<span class="st0">"child"</span>&gt;&lt;/div&gt;
    &lt;div id=<span class="st0">"first"</span>&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'second'</span><span class="br0">)</span>.<span class="me1">wraps</span><span class="br0">(</span><span class="st0">'first'</span>, <span class="st0">'top'</span><span class="br0">)</span>;
</pre>

<h5>Resulting HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"second"</span>&gt;
    &lt;div id=<span class="st0">"first"</span>&gt;&lt;/div&gt;
    &lt;div id=<span class="st0">"child"</span>&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>

<h2 id="Element:appendText"><a href="#Element:appendText">Element Method: appendText</a></h2>

<p class="description">Works like <a href="#Element:grab">Element:grab</a>, but instead of accepting an id or an element, it only accepts text.
A text node will be created inside this Element, in either the top or bottom position.</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">appendText</span><span class="br0">(</span>text<span class="br0">[</span>, where<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>text  - (<em>string</em>) The text to append.</li>
<li>where - (<em>string</em>, optional: default 'bottom') The position to inject the text to. Values accepted are 'top', 'bottom', 'before' and 'after'.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>element</em>) The current Element instance.</li>
</ul>
<h3>Examples:</h3>

<h5>HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"myElement"</span>&gt;Hey.&lt;/div&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">appendText</span><span class="br0">(</span><span class="st0">' Howdy.'</span><span class="br0">)</span>;
</pre>

<h5>Resulting HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"myElement"</span>&gt;Hey. <span class="me1">Howdy</span>.&lt;/div&gt;
</pre>

<h2 id="Element:dispose"><a href="#Element:dispose">Element Method: dispose</a></h2>

<p class="description">Removes the Element from the DOM.</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> removedElement = myElement.<span class="me1">dispose</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns:</h3>

<ul>
<li>(<em>element</em>) This Element. Useful to always grab the return from this function, as the element could be <a href="#Element:inject">injected</a> back.</li>
</ul>
<h3>Examples:</h3>

<h5>HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"myElement"</span>&gt;&lt;/div&gt;
&lt;div id=<span class="st0">"mySecondElement"</span>&gt;&lt;/div&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">dispose</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h5>Resulting HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"mySecondElement"</span>&gt;&lt;/div&gt;
</pre>

<h3>See Also:</h3>

<ul>
<li><a href="https://developer.mozilla.org/En/DOM/Node.removeChild">MDC Element:removeChild</a></li>
</ul>
<h2 id="Element:clone"><a href="#Element:clone">Element Method: clone</a></h2>

<p class="description">Clones the Element and returns the cloned one.</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> copy = myElement.<span class="me1">clone</span><span class="br0">(</span><span class="br0">[</span>contents, keepid<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>contents - (<em>boolean</em>, optional: defaults to true) When set to false the Element's contents are not cloned.</li>
<li>keepid - (<em>boolean</em>, optional: defaults to false) When true the cloned Element keeps the id attribute, if present. Same goes for any of the cloned childNodes.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>element</em>) The cloned Element.</li>
</ul>
<h3>Examples:</h3>

<h5>HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"myElement"</span>&gt;ciao&lt;/div&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript"><span class="co1">// clones the Element and appends the clone after the Element.</span>
<span class="kw2">var</span> clone = $<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">clone</span><span class="br0">(</span><span class="br0">)</span>.<span class="me1">inject</span><span class="br0">(</span><span class="st0">'myElement'</span>,<span class="st0">'after'</span><span class="br0">)</span>;
</pre>

<h5>Resulting HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"myElement"</span>&gt;ciao&lt;/div&gt;
&lt;div&gt;ciao&lt;/div&gt;
</pre>

<h3>Note:</h3>

<ul>
<li>The returned Element does not have attached events. To clone the events use <a href="Element.Event.html#Element:cloneEvents">Element:cloneEvents</a>.</li>
<li>Values stored in Element.Storage are not cloned.</li>
<li>The clone element and its children are stripped of ids, unless otherwise specified by the keepid parameter.</li>
</ul>
<h3>See Also:</h3>

<ul>
<li>
<a href="Element.Event.html#Element:cloneEvents">Element:cloneEvents</a>.</li>
</ul>
<h2 id="Element:replaces"><a href="#Element:replaces">Element Method: replaces</a></h2>

<p class="description">Replaces the passed Element with Element.</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> element = myElement.<span class="me1">replaces</span><span class="br0">(</span>el<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>el - (<em>mixed</em>) A string id representing the Element to be replaced, or an Element reference.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>element</em>) This Element.</li>
</ul>
<h3>Examples:</h3>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myNewElement'</span><span class="br0">)</span>.<span class="me1">replaces</span><span class="br0">(</span>$<span class="br0">(</span><span class="st0">'myOldElement'</span><span class="br0">)</span><span class="br0">)</span>;
<span class="co1">//$('myOldElement') is gone, and $('myNewElement') is in its place.</span>
</pre>

<h3>See Also:</h3>

<ul>
<li><a href="https://developer.mozilla.org/En/DOM/Node.replaceChild">MDC Element:replaceChild</a></li>
</ul>
<h2 id="Element:hasClass"><a href="#Element:hasClass">Element Method: hasClass</a></h2>

<p class="description">Tests the Element to see if it has the passed in className.</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> result = myElement.<span class="me1">hasClass</span><span class="br0">(</span>className<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>className - (<em>string</em>) The class name to test.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>boolean</em>) Returns true if the Element has the class, otherwise false.</li>
</ul>
<h3>Examples:</h3>

<h5>HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"myElement"</span> <span class="kw2">class</span>=<span class="st0">"testClass"</span>&gt;&lt;/div&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">hasClass</span><span class="br0">(</span><span class="st0">'testClass'</span><span class="br0">)</span>; <span class="co1">// returns true</span>
</pre>

<h2 id="Element:addClass"><a href="#Element:addClass">Element Method: addClass</a></h2>

<p class="description">Adds the passed in class to the Element, if the Element doesnt already have it.</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">addClass</span><span class="br0">(</span>className<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>className - (<em>string</em>) The class name to add.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>element</em>) This Element.</li>
</ul>
<h3>Examples:</h3>

<h5>HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"myElement"</span> <span class="kw2">class</span>=<span class="st0">"testClass"</span>&gt;&lt;/div&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'newClass'</span><span class="br0">)</span>;
</pre>

<h5>Resulting HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"myElement"</span> <span class="kw2">class</span>=<span class="st0">"testClass newClass"</span>&gt;&lt;/div&gt;
</pre>

<h2 id="Element:removeClass"><a href="#Element:removeClass">Element Method: removeClass</a></h2>

<p class="description">Works like <a href="#Element:addClass">Element:addClass</a>, but removes the class from the Element.</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">removeClass</span><span class="br0">(</span>className<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>className - (<em>string</em>) The class name to remove.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>element</em>) This Element.</li>
</ul>
<h3>Examples:</h3>

<h5>HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"myElement"</span> <span class="kw2">class</span>=<span class="st0">"testClass newClass"</span>&gt;&lt;/div&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'newClass'</span><span class="br0">)</span>;
</pre>

<h5>Resulting HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"myElement"</span> <span class="kw2">class</span>=<span class="st0">"testClass"</span>&gt;&lt;/div&gt;
</pre>

<h2 id="Element:toggleClass"><a href="#Element:toggleClass">Element Method: toggleClass</a></h2>

<p class="description">Adds or removes the passed in class name to the Element, depending on whether or not it's already present.</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">toggleClass</span><span class="br0">(</span>className, force<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>className - (<em>string</em>) The class to add or remove.</li>
<li>force - (<em>boolean</em>, optional) Force the class to be either added or removed</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>element</em>) This Element.</li>
</ul>
<h3>Examples:</h3>

<h5>HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"myElement"</span> <span class="kw2">class</span>=<span class="st0">"myClass"</span>&gt;&lt;/div&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">toggleClass</span><span class="br0">(</span><span class="st0">'myClass'</span><span class="br0">)</span>;
</pre>

<h5>Resulting HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"myElement"</span> <span class="kw2">class</span>=<span class="st0">""</span>&gt;&lt;/div&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">toggleClass</span><span class="br0">(</span><span class="st0">'myClass'</span><span class="br0">)</span>;
</pre>

<h5>Resulting HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"myElement"</span> <span class="kw2">class</span>=<span class="st0">"myClass"</span>&gt;&lt;/div&gt;
</pre>

<h2 id="Element:getPrevious"><a href="#Element:getPrevious">Element Method: getPrevious</a></h2>

<p class="description">Returns the previousSibling of the Element (excluding text nodes).</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> previousSibling = myElement.<span class="me1">getPrevious</span><span class="br0">(</span><span class="br0">[</span>match<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>match - (<em>string</em>, optional): A tag name to match the the found element(s) with. A full CSS selector can be passed.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>mixed</em>) The previous sibling Element or null if none found.</li>
</ul>
<h2 id="Element:getAllPrevious"><a href="#Element:getAllPrevious">Element Method: getAllPrevious</a></h2>

<p class="description">Like <a href="#Element:getPrevious">Element:getPrevious</a>, but returns a collection of all the matched previousSiblings.</p>

<h2 id="Element:getNext"><a href="#Element:getNext">Element Method: getNext</a></h2>

<p class="description">As <a href="#Element:getPrevious">Element:getPrevious</a>, but tries to find the nextSibling (excluding text nodes).</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> nextSibling = myElement.<span class="me1">getNext</span><span class="br0">(</span><span class="br0">[</span>match<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>match - (<em>string</em>, optional): A comma seperated list of tag names to match the found element(s) with. A full CSS selector can be passed.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>mixed</em>) The next sibling Element or null if none found.</li>
</ul>
<h2 id="Element:getAllNext"><a href="#Element:getAllNext">Element Method: getAllNext</a></h2>

<p class="description">Like Element.getNext, but returns a collection of all the matched nextSiblings.</p>

<h2 id="Element:getFirst"><a href="#Element:getFirst">Element Method: getFirst</a></h2>

<p class="description">Gets the first element that matches the passed in expression.</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> firstElement = myElement.<span class="me1">getFirst</span><span class="br0">(</span><span class="br0">[</span>match<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>match - (<em>string</em>, optional): A full CSS selector to match the found element(s) with.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>mixed</em>) The first found element or null if none found.</li>
</ul>
<h2 id="Element:getLast"><a href="#Element:getLast">Element Method: getLast</a></h2>

<p class="description">Gets the last element that matches the passed in expression.</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> lastElement = myElement.<span class="me1">getLast</span><span class="br0">(</span><span class="br0">[</span>match<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>match - (<em>string</em>, optional): A full CSS selector to match the found element(s) with.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>mixed</em>) The last found element, or returns null if none found.</li>
</ul>
<h2 id="Element:getParent"><a href="#Element:getParent">Element Method: getParent</a></h2>

<p class="description">Works as <a href="#Element:getPrevious">Element:getPrevious</a>, but tries to find the parentNode.</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> parent = myElement.<span class="me1">getParent</span><span class="br0">(</span><span class="br0">[</span>match<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>match - (<em>string</em>, optional): A tag name to match the found element(s) with. A full CSS selector can be passed.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>mixed</em>) The target Element's parent or null if no matching parent is found.</li>
</ul>
<h2 id="Element:getParents"><a href="#Element:getParents">Element Method: getParents</a></h2>

<p class="description">Like <a href="#Element:getParent">Element:getParent</a>, but returns a collection of all the matched parentNodes up the tree.</p>

<h2 id="Element:getSiblings"><a href="#Element:getSiblings">Element Method: getSiblings</a></h2>

<p class="description">Like <a href="#Element:getAllPrevious">Element:getAllPrevious</a> but returns all Element's previous and next siblings (excluding text nodes). Returns as <a href="#Elements">Elements</a>.</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> siblings = myElement.<span class="me1">getSiblings</span><span class="br0">(</span><span class="br0">[</span>match<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>match - (<em>string</em>, optional): A tag name to match the found element(s) with. A full CSS selector can be passed.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>array</em>) A <a href="#Elements">Elements</a> array with all of the Element's siblings, except the text nodes.</li>
</ul>
<h2 id="Element:getChildren"><a href="#Element:getChildren">Element Method: getChildren</a></h2>

<p class="description">Returns all the Element's children (excluding text nodes). Returns as <a href="#Elements">Elements</a>.</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> children = myElement.<span class="me1">getChildren</span><span class="br0">(</span><span class="br0">[</span>match<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>match - (<em>string</em>, optional): A tag name to match the found element(s) with. A full CSS selector can be passed.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>array</em>) A <a href="#Elements">Elements</a> array with all of the Element's children, except the text nodes.</li>
</ul>
<h3>Note:</h3>

<p>The difference between the methods <em>getChildren</em> and <em>getElements</em> is that getChildren will only return its direct children while getElements searches for all the Elements in any depth.</p>

<h2 id="Element:empty"><a href="#Element:empty">Element Method: empty</a></h2>

<p class="description">Empties an Element of all its children.</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">empty</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns:</h3>

<ul>
<li>(<em>element</em>) This Element.</li>
</ul>
<h3>Examples:</h3>

<h5>HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"myElement"</span>&gt;
    &lt;p&gt;&lt;/p&gt;
    &lt;span&gt;&lt;/span&gt;
&lt;/div&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">empty</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h5>Resulting HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"myElement"</span>&gt;&lt;/div&gt;
</pre>

<h2 id="Element:destroy"><a href="#Element:destroy">Element Method: destroy</a></h2>

<p class="description">Removes the Element and its children from the DOM and prepares them for garbage collection.</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">destroy</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns:</h3>

<ul>
<li>(<em>null</em>)</li>
</ul>
<h2 id="Element:toQueryString"><a href="#Element:toQueryString">Element Method: toQueryString</a></h2>

<p class="description">Reads the child inputs of the Element and generates a query string based on their values.</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> query = myElement.<span class="me1">toQueryString</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns:</h3>

<ul>
<li>(<em>string</em>) A string representation of a all the input Elements' names and values.</li>
</ul>
<h3>Examples:</h3>

<h5>HTML</h5>

<pre class="javascript">&lt;form id=<span class="st0">"myForm"</span> action=<span class="st0">"submit.php"</span>&gt;
    &lt;input <span class="kw3">name</span>=<span class="st0">"email"</span> value=<span class="st0">"bob@bob.com"</span> /&gt;
    &lt;input <span class="kw3">name</span>=<span class="st0">"zipCode"</span> value=<span class="st0">"90210"</span> /&gt;
&lt;/form&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myForm'</span><span class="br0">)</span>.<span class="me1">toQueryString</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">// returns "email=bob@bob.com&amp;zipCode=90210".</span>
</pre>

<h2 id="Element:getSelected"><a href="#Element:getSelected">Element Method: getSelected</a></h2>

<p class="description">Returns the selected options of a select element.</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> selected = mySelect.<span class="me1">getSelected</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns:</h3>

<ul>
<li>(<em>array</em>) An array of the selected elements.</li>
</ul>
<h3>Examples:</h3>

<h5>HTML</h5>

<pre class="javascript">&lt;select id=<span class="st0">"country-select"</span> <span class="kw3">name</span>=<span class="st0">"country"</span>&gt;
    &lt;option value=<span class="st0">"US"</span>&gt;United States&lt;/option
    &lt;option value =<span class="st0">"IT"</span>&gt;Italy&lt;/option&gt;
&lt;/select&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'country-select'</span><span class="br0">)</span>.<span class="me1">getSelected</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">// returns whatever the user selected.</span>
</pre>

<h3>Note:</h3>

<p>This method returns an array, regardless of the multiple attribute of the select element.
If the select is single, it will return an array with only one item.</p>

<h2 id="Element:getProperty"><a href="#Element:getProperty">Element Method: getProperty</a></h2>

<p class="description">Returns a single element attribute.</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> myProp = myElement.<span class="me1">getProperty</span><span class="br0">(</span>property<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ul>
<li>property - (<em>string</em>) The property to be retrieved.</li>
</ul>
<h3>Returns:</h3>

<ul>
<li>(<em>string</em>) A string containing the Element's requested property.</li>
</ul>
<h3>Examples:</h3>

<h5>HTML</h5>

<pre class="javascript">&lt;img id=<span class="st0">"myImage"</span> src=<span class="st0">"mootools.png"</span> title=<span class="st0">"MooTools, the compact JavaScript framework"</span> alt=<span class="st0">""</span> /&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript"><span class="kw2">var</span> imgProps = $<span class="br0">(</span><span class="st0">'myImage'</span><span class="br0">)</span>.<span class="me1">getProperty</span><span class="br0">(</span><span class="st0">'src'</span><span class="br0">)</span>; <span class="co1">// returns: 'mootools.png'.</span>
</pre>

<h2 id="Element:getProperties"><a href="#Element:getProperties">Element Method: getProperties</a></h2>

<p class="description">Gets multiple element attributes.</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> myProps = myElement.<span class="me1">getProperties</span><span class="br0">(</span>properties<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ul>
<li>properties - (<em>strings</em>) Any number of properties to be retrieved.</li>
</ul>
<h3>Returns:</h3>

<ul>
<li>(<em>object</em>) An object containing all of the Element's requested properties.</li>
</ul>
<h3>Examples:</h3>

<h5>HTML</h5>

<pre class="javascript">&lt;img id=<span class="st0">"myImage"</span> src=<span class="st0">"mootools.png"</span> title=<span class="st0">"MooTools, the compact JavaScript framework"</span> alt=<span class="st0">""</span> /&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript"><span class="kw2">var</span> imgProps = $<span class="br0">(</span><span class="st0">'myImage'</span><span class="br0">)</span>.<span class="me1">getProperties</span><span class="br0">(</span><span class="st0">'id'</span>, <span class="st0">'src'</span>, <span class="st0">'title'</span>, <span class="st0">'alt'</span><span class="br0">)</span>;
<span class="co1">// returns: { id: 'myImage', src: 'mootools.png', title: 'MooTools, the compact JavaScript framework', alt: '' }</span>
</pre>

<h2 id="Element:setProperty"><a href="#Element:setProperty">Element Method: setProperty</a></h2>

<p class="description">Sets an attribute or special property for this Element.</p>

<h3>Arguments:</h3>

<ol>
<li>property - (<em>string</em>) The property to assign the value passed in.</li>
<li>value - (<em>mixed</em>) The value to assign to the property passed in.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>element</em>) - This Element.</li>
</ul>
<h3>Examples:</h3>

<h5>HTML</h5>

<pre class="javascript">&lt;img id=<span class="st0">"myImage"</span> /&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myImage'</span><span class="br0">)</span>.<span class="me1">setProperty</span><span class="br0">(</span><span class="st0">'src'</span>, <span class="st0">'mootools.png'</span><span class="br0">)</span>;
</pre>

<h5>Resulting HTML</h5>

<pre class="javascript">&lt;img id=<span class="st0">"myImage"</span> src=<span class="st0">"mootools.png"</span> /&gt;
</pre>

<h3>Note</h3>

<ul>
<li>Whenever using <a href="#Element:setProperty">Element:setProperty</a> to set an attribute, pass in the lowercase, simplified form of the property. For example:

<ul>
<li>use 'for', not 'htmlFor',</li>
<li>use 'class', not 'className'</li>
<li>use 'frameborder', not 'frameBorder'</li>
<li>etc.</li>
</ul>
</li>
</ul>
<h2 id="Element:setProperties"><a href="#Element:setProperties">Element Method: setProperties</a></h2>

<p class="description">Sets numerous attributes for the Element.</p>

<h3>Arguments:</h3>

<ol>
<li>properties - (<em>object</em>) An object with key/value pairs.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>element</em>) This Element.</li>
</ul>
<h3>Examples:</h3>

<h5>HTML</h5>

<pre class="javascript">&lt;img id=<span class="st0">"myImage"</span> /&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myImage'</span><span class="br0">)</span>.<span class="me1">setProperties</span><span class="br0">(</span><span class="br0">{</span>
    src: <span class="st0">'whatever.gif'</span>,
    alt: <span class="st0">'whatever dude'</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h5>Resulting HTML</h5>

<pre class="javascript">&lt;img id=<span class="st0">"myImage"</span> src=<span class="st0">"whatever.gif"</span> alt=<span class="st0">"whatever dude"</span> /&gt;
</pre>

<h2 id="Element:removeProperty"><a href="#Element:removeProperty">Element Method: removeProperty</a></h2>

<p class="description">Removes an attribute from the Element.</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">removeProperty</span><span class="br0">(</span>property<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>property - (<em>string</em>) The attribute to remove.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>element</em>) This Element.</li>
</ul>
<h3>Examples:</h3>

<h5>HTML</h5>

<pre class="javascript">&lt;a id=<span class="st0">"myAnchor"</span> href=<span class="st0">"#"</span> onmousedown=<span class="st0">"alert('click');"</span>&gt;&lt;/a&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript"><span class="co1">//Eww... inline JavaScript is bad! Let's get rid of it.</span>
$<span class="br0">(</span><span class="st0">'myAnchor'</span><span class="br0">)</span>.<span class="me1">removeProperty</span><span class="br0">(</span><span class="st0">'onmousedown'</span><span class="br0">)</span>;
</pre>

<h5>Resulting HTML</h5>

<pre class="javascript">&lt;a id=<span class="st0">"myAnchor"</span> href=<span class="st0">"#"</span>&gt;&lt;/a&gt;
</pre>

<h2 id="Element:removeProperties"><a href="#Element:removeProperties">Element Method: removeProperties</a></h2>

<p class="description">Removes numerous attributes from the Element.</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">removeProperties</span><span class="br0">(</span>properties<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>properties - (<em>strings</em>) The attributes to remove, separated by comma.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>element</em>) This Element.</li>
</ul>
<h3>Examples:</h3>

<h5>HTML</h5>

<pre class="javascript">&lt;a id=<span class="st0">"myAnchor"</span> href=<span class="st0">"#"</span> title=<span class="st0">"hello world"</span>&gt;&lt;/a&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myAnchor'</span><span class="br0">)</span>.<span class="me1">removeProperties</span><span class="br0">(</span><span class="st0">'id'</span>, <span class="st0">'href'</span>, <span class="st0">'title'</span><span class="br0">)</span>;
</pre>

<h5>Resulting HTML</h5>

<pre class="javascript">&lt;a&gt;&lt;/a&gt;
</pre>

<h2 id="Element:store"><a href="#Element:store">Element Method: store</a></h2>

<p class="description">Stores an item in the Elements Storage, linked to this Element.</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">store</span><span class="br0">(</span>key, value<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>key - (<em>string</em>) The key you want to assign to the stored value.</li>
<li>value - (<em>mixed</em>) Any value you want to store.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>element</em>) This Element.</li>
</ul>
<h3>Example:</h3>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'element'</span><span class="br0">)</span>.<span class="me1">store</span><span class="br0">(</span><span class="st0">'someProperty'</span>, someValue<span class="br0">)</span>;
</pre>

<h2 id="Element:retrieve"><a href="#Element:retrieve">Element Method: retrieve</a></h2>

<p class="description">Retrieves a value from the Elements storage.</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">retrieve</span><span class="br0">(</span>key<span class="br0">[</span>, <span class="kw2">default</span><span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>key - (<em>string</em>) The key you want to retrieve from the storage.</li>
<li>default - (<em>mixed</em>, optional) Default value to store and return if no value is stored.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>mixed</em>) The value linked to the key.</li>
</ul>
<h3>Example:</h3>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'element'</span><span class="br0">)</span>.<span class="me1">retrieve</span><span class="br0">(</span><span class="st0">'someProperty'</span><span class="br0">)</span>; <span class="co1">// returns someValue (see example above)</span>
</pre>

<h2 id="Element:eliminate"><a href="#Element:eliminate">Element Method: eliminate</a></h2>

<p class="description">Eliminates a key from the Elements storage.</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">eliminate</span><span class="br0">(</span>key<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>key - (<em>string</em>) The key you want to eliminate from the storage.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>mixed</em>) The element/window/document.</li>
</ul>
<h3>Example:</h3>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'element'</span><span class="br0">)</span>.<span class="me1">eliminate</span><span class="br0">(</span><span class="st0">'someProperty'</span><span class="br0">)</span>;
</pre>

<h1 id="Element-Properties"><a href="#Element-Properties">Object: Element.Properties</a></h1>

<p class="description">This Object contains the functions that respond to the first argument passed in <a href="#Element:get">Element:get</a>, <a href="#Element:set">Element:set</a> and <a href="#Element:erase">Element:erase</a>.</p>

<h3>Adding a Custom Element Property</h3>

<pre class="javascript">Element.<span class="me1">Properties</span>.<span class="me1">disabled</span> = <span class="br0">{</span>
&nbsp;
    get: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
        <span class="kw1">return</span> <span class="kw1">this</span>.<span class="me1">disabled</span>;
    <span class="br0">}</span>,
&nbsp;
    set: <span class="kw2">function</span><span class="br0">(</span>value<span class="br0">)</span><span class="br0">{</span>
        <span class="kw1">this</span>.<span class="me1">disabled</span> = !!value;
        <span class="kw1">this</span>.<span class="me1">setAttribute</span><span class="br0">(</span><span class="st0">'disabled'</span>, !!value<span class="br0">)</span>;
    <span class="br0">}</span>
&nbsp;
<span class="br0">}</span>;
</pre>

<h3>Using a Custom Element Property</h3>

<pre class="javascript"><span class="co1">// gets the "disabled" property</span>
$<span class="br0">(</span>element<span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'disabled'</span><span class="br0">)</span>;
<span class="co1">// sets the "disabled" property to true, along with the attribute</span>
$<span class="br0">(</span>element<span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'disabled'</span>, <span class="kw2">true</span><span class="br0">)</span>;
</pre>

<h3>Using an Object:</h3>

<p>Additionally, you can access these custom getters and setters using an object as the parameter for the <a href="#Element:set">set</a> method.</p>

<h4>Example:</h4>

<pre class="javascript"><span class="co1">// using set:</span>
$<span class="br0">(</span>divElement<span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="br0">{</span>html: <span class="st0">'&lt;p&gt;Hello &lt;em&gt;People&lt;/em&gt;!&lt;/p&gt;'</span>, style: <span class="st0">'background:red'</span><span class="br0">}</span><span class="br0">)</span>;
&nbsp;
<span class="co1">// for new Elements (works the same as set):</span>
<span class="kw2">new</span> Element<span class="br0">(</span><span class="st0">'input'</span>, <span class="br0">{</span>type: <span class="st0">'checkbox'</span>, checked: <span class="kw2">true</span>, disabled: <span class="kw2">true</span><span class="br0">}</span><span class="br0">)</span>;
</pre>

<h3>Notes:</h3>

<ul>
<li>Automatically returns the element for setters.</li>
<li>Since MooTools 1.3 this is a native JavaScript Object and not an instance of the deprecated Hash</li>
</ul>
<h2 id="Element-Properties:html"><a href="#Element-Properties:html">Element Property: html</a></h2>

<h3 class="description">Setter:</h3>

<p>Sets the innerHTML of the Element.</p>

<h4>Syntax:</h4>

<pre class="javascript">myElement.<span class="me1">set</span><span class="br0">(</span><span class="st0">'html'</span>, html<span class="br0">)</span>;
</pre>

<h4>Arguments:</h4>

<ol>
<li>html - (<em>string</em>) The new content as HTML string.</li>
</ol>
<h4>Returns:</h4>

<ul>
<li>(<em>element</em>) This Element.</li>
</ul>
<h4>Examples:</h4>

<h5>HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"myElement"</span>&gt;&lt;/div&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'html'</span>, <span class="st0">'&lt;div&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;'</span><span class="br0">)</span>;
</pre>

<h5>Resulting HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"myElement"</span>&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;p&gt;&lt;/p&gt;
&lt;/div&gt;
</pre>

<h3>Getter:</h3>

<p>Returns the inner HTML of the Element.</p>

<h4>Syntax:</h4>

<pre class="javascript">myElement.<span class="me1">get</span><span class="br0">(</span><span class="st0">'html'</span><span class="br0">)</span>;
</pre>

<h4>Returns:</h4>

<ul>
<li>(<em>text</em>) This Element's innerHTML.</li>
</ul>
<h2 id="Element-Properties:text"><a href="#Element-Properties:text">Element Property: text</a></h2>

<h3 class="description">Setter:</h3>

<p>Sets the inner text of the Element.</p>

<h4>Syntax:</h4>

<pre class="javascript">myElement.<span class="me1">set</span><span class="br0">(</span><span class="st0">'text'</span>, text<span class="br0">)</span>;
</pre>

<h4>Arguments:</h4>

<ol>
<li>text - (<em>string</em>) The new text content for the Element.</li>
</ol>
<h4>Returns:</h4>

<ul>
<li>(<em>element</em>) This Element.</li>
</ul>
<h4>Examples:</h4>

<h5>HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"myElement"</span>&gt;&lt;/div&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'text'</span>, <span class="st0">'some text'</span><span class="br0">)</span>;
<span class="co1">// the text of myElement is now 'some text'.</span>
</pre>

<h5>Resulting HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"myElement"</span>&gt;some text&lt;/div&gt;
</pre>

<h3>Getter:</h3>

<p>Gets the inner text of the Element.</p>

<h4>Syntax:</h4>

<pre class="javascript"><span class="kw2">var</span> myText = myElement.<span class="me1">get</span><span class="br0">(</span><span class="st0">'text'</span><span class="br0">)</span>;
</pre>

<h4>Returns:</h4>

<ul>
<li>(<em>string</em>) The text of the Element.</li>
</ul>
<h4>Examples:</h4>

<h5>HTML</h5>

<pre class="javascript">&lt;div id=<span class="st0">"myElement"</span>&gt;my text&lt;/div&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript"><span class="kw2">var</span> myText = $<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'text'</span><span class="br0">)</span>; <span class="co1">// myText = 'my text'.</span>
</pre>

<h2 id="Element-Properties:tag"><a href="#Element-Properties:tag">Element Property: tag</a></h2>

<h3 class="description">Getter:</h3>

<p>Returns the tag name of the Element in lower case.</p>

<h4>Syntax:</h4>

<pre class="javascript"><span class="kw2">var</span> myTag = myElement.<span class="me1">get</span><span class="br0">(</span><span class="st0">'tag'</span><span class="br0">)</span>;
</pre>

<h4>Returns:</h4>

<ul>
<li>(<em>string</em>) The tag name in lower case.</li>
</ul>
<h4>Examples:</h4>

<h5>HTML</h5>

<pre class="javascript">&lt;img id=<span class="st0">"myImage"</span> /&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript"><span class="kw2">var</span> myTag = $<span class="br0">(</span><span class="st0">'myImage'</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'tag'</span><span class="br0">)</span>; <span class="co1">// myTag = 'img'</span>
</pre>

<h1 id="IFrame"><a href="#IFrame">Type: IFrame</a></h1>

<p class="description">Custom Type to create and easily work with IFrames.</p>

<h2 id="IFrame:constructor"><a href="#IFrame:constructor">IFrame Method: constructor</a></h2>

<p class="description">Creates an IFrame HTML Element and extends its window and document with MooTools.</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> myIFrame = <span class="kw2">new</span> IFrame<span class="br0">(</span><span class="br0">[</span>el<span class="br0">]</span><span class="br0">[</span>, props<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>el - (<em>mixed</em>, optional) The id of the IFrame to be converted, or the actual IFrame element. If its not passed, a new IFrame will be created (default).</li>
<li>props - (<em>object</em>, optional) The properties to be applied to the new IFrame. Same as <a href="#Element:constructor">Element:constructor</a> props argument.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>element</em>) A new IFrame HTML Element.</li>
</ul>
<h3>Examples:</h3>

<pre class="javascript"><span class="kw2">var</span> myIFrame = <span class="kw2">new</span> IFrame<span class="br0">(</span><span class="br0">{</span>
&nbsp;
    src: <span class="st0">'http://mootools.net/'</span>,
&nbsp;
    styles: <span class="br0">{</span>
        width: <span class="nu0">800</span>,
        height: <span class="nu0">600</span>,
        border: <span class="st0">'1px solid #ccc'</span>
    <span class="br0">}</span>,
&nbsp;
    events: <span class="br0">{</span>
&nbsp;
        mouseenter: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
            <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'Welcome aboard.'</span><span class="br0">)</span>;
        <span class="br0">}</span>,
&nbsp;
        mouseleave: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
            <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'Goodbye!'</span><span class="br0">)</span>;
        <span class="br0">}</span>,
&nbsp;
        load: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
            <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'The iframe has finished loading.'</span><span class="br0">)</span>;
        <span class="br0">}</span>
&nbsp;
    <span class="br0">}</span>
&nbsp;
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h3>Notes:</h3>

<ul>
<li>If the IFrame already exists and has a different name than id, the name will be made the same as the id.</li>
<li>An IFrame's window and document will not be extended with MooTools methods.</li>
</ul>
<h1 id="Elements"><a href="#Elements">Type: Elements</a></h1>

<p class="description">The Elements class allows <a href="#Element">Element</a> methods to work on an <a href="#Elements">Elements</a> array, as well as <a href="../Types/Array.html">Array</a> Methods.</p>

<h2 id="Elements:constructor"><a href="#Elements:constructor">Elements Method: constructor</a></h2>

<h3 class="description">Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> myElements = <span class="kw2">new</span> Elements<span class="br0">(</span>elements<span class="br0">[</span>, options<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>elements - (<em>mixed</em>) An array of elements or an HTMLCollection Object.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>array</em>) An array-like Elements collection with the <a href="#Element">Element</a>, <a href="#Elements">Elements</a> and <a href="../Types/Array.html">Array</a> methods.</li>
</ul>
<h3>Examples:</h3>

<h4>Set Every Paragraph's Color to Red:</h4>

<pre class="javascript">$$<span class="br0">(</span><span class="st0">'p'</span><span class="br0">)</span>.<span class="me1">each</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span>el<span class="br0">)</span><span class="br0">{</span>
    el.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'color'</span>, <span class="st0">'red'</span><span class="br0">)</span>;
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
<span class="co1">// Because $$('myselector') also accepts Element methods, the below</span>
<span class="co1">// example has the same effect as the one above.</span>
$$<span class="br0">(</span><span class="st0">'p'</span><span class="br0">)</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'color'</span>, <span class="st0">'red'</span><span class="br0">)</span>;
</pre>

<h4>Create Elements From an Array:</h4>

<pre class="javascript"><span class="kw2">var</span> myElements = <span class="kw2">new</span> Elements<span class="br0">(</span><span class="br0">[</span><span class="st0">'myElementID'</span>, $<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>, <span class="st0">'myElementID2'</span>, document.<span class="me1">getElementById</span><span class="br0">(</span><span class="st0">'myElementID3'</span><span class="br0">)</span><span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Notes:</h3>

<ul>
<li>In MooTools, every DOM function which returns a collection of nodes (such as <a href="#Window:dollars">$$</a>) returns the nodes as instances of Elements.</li>
<li>Because Elements is an array-like-object, it accepts all the <a href="../Types/Array.html">Array</a> methods, while giving precedence to <a href="#Element">Element</a> and <a href="#Elements">Elements</a> methods.</li>
<li>Every node of the Elements instance has all the <a href="#Element">Element</a> methods.</li>
</ul>
<h3>See Also:</h3>

<ul>
<li>
<a href="#Window:dollars">$$</a>, <a href="#Window:dollar">$</a>, <a href="#Element">Element</a>, <a href="#Elements">Elements</a>, <a href="../Types/Array.html">Array</a>
</li>
</ul>
<h2 id="Elements:filter"><a href="#Elements:filter">Elements Method: filter</a></h2>

<p class="description">Filters a collection of elements by a given tag name.  This method will be able to filter by any selector.
It also works like <a href="../Types/Array.html#Array:filter">Array:filter</a>, by filtering collection of elements with a function.</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> filteredElements = elements.<span class="me1">filter</span><span class="br0">(</span>selector<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>selector - (<em>mixed</em>) A single CSS selector.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>array</em>) A subset of this <a href="#Elements">Elements</a> instance.</li>
</ul>
<h1 id="Deprecated-Functions"><a href="#Deprecated-Functions">Deprecated Functions</a></h1>

<h2 id="Deprecated-Functions:hasChild" class="description"><a href="#Deprecated-Functions:hasChild">Element Method: hasChild</a></h2>

<p class="description">This method has been deprecated. Use <a href="#Element:contains">Element:contains</a> instead.</p>

<h3>Example:</h3>

<pre class="javascript"><span class="kw2">var</span> myElement = document.<span class="me1">id</span><span class="br0">(</span><span class="st0">'element1'</span><span class="br0">)</span>;
<span class="kw2">var</span> myElement2 = document.<span class="me1">id</span><span class="br0">(</span><span class="st0">'element2'</span><span class="br0">)</span>;
myElement !== myElement2 &amp;&amp; myElement.<span class="me1">contains</span><span class="br0">(</span>element2<span class="br0">)</span>;
&nbsp;
<span class="co1">// could be implemented as:</span>
Element.<span class="me1">implement</span><span class="br0">(</span><span class="st0">'hasChild'</span>, <span class="kw2">function</span><span class="br0">(</span>element<span class="br0">)</span><span class="br0">{</span>
    <span class="kw1">return</span> <span class="kw1">this</span> !== element &amp;&amp; <span class="kw1">this</span>.<span class="me1">contains</span><span class="br0">(</span>element<span class="br0">)</span>;
<span class="br0">}</span><span class="br0">)</span>;
</pre>
    </div>
  </div>

<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
